<template>
  <div class="CustomerManagement">
    <!--权限弹框 已开发模块-->
    <el-dialog class="perssionDialog"
               :visible.sync="perssionDialog"
               width="500px"
               center>
      <el-row class="perssionDialogInfo">
        <el-col :span="12" style="height:200px;">
          <img src="../../../static/img/PerssionImg.png" alt="">
        </el-col>
        <div class="perssionCont">
          <div class="title">{{$t('Searchlight.perssionDialog.authorization.title')}}</div>
          <div class="cont">{{$t('Searchlight.perssionDialog.authorization.subTitle')}}</div>
          <router-link to='/guide' class="perssion-link">https://cbitest.lenovo.com/?permanent#/guide</router-link>
        </div>
      </el-row>
    </el-dialog>
    <!--权限弹框 建设中-->
    <el-dialog class="perssionDialog constructionDialog"
               :visible.sync="constructionDialog"
               width="500px"
               center>
      <div class="perssionDialogInfo" style="padding:20px 0 34px; text-align: center;">
        <div class="title" style="color:#333;margin-bottom: 30px;">{{$t('Searchlight.perssionDialog.construction')}}</div>
        <img src="../../../static/img/ConstructionImg.png" alt="">
      </div>
    </el-dialog>
    <el-card class="top-box">
      <div class="title">{{$t('route.CustomerLifeCycle')}}</div>
      <div class="img-info">
        <img :src="tabImg">
      </div>
    </el-card>
    <el-row :gutter="20" class="bottom-box">
      <el-col :span="6" class="column1">
        <el-card style="min-height:555px;">
          <div class="title">{{$t('Searchlight.CustomerManagement.column1.title')}}</div>
          <div class="question">{{$t('CustomerManagement.column1.question')}}</div>
          <div class="cont">{{$t('CustomerManagement.column1.cont')}}</div>
          <div class="question">{{$t('CustomerManagement.question')}}</div>
          <div class="perssion-link"
               @click="showConstructionDialog"
               v-for="item in $t('Searchlight.CustomerManagement.column1.links')" :key="item.link">{{item.link}}</div>
        </el-card>
      </el-col>
      <el-col :span="10" class="column2">
        <el-card style="min-height:555px;">
          <div class="title">{{$t('Searchlight.CustomerManagement.column2.title')}}</div>
          <div class="question">{{$t('CustomerManagement.column2.question')}}</div>
          <div class="cont">{{$t('CustomerManagement.column2.cont')}}</div>
          <div class="question">{{$t('CustomerManagement.question')}}</div>
          <el-row class="middleLink">
            <el-col :span="12"  v-for="item in $t('Searchlight.CustomerManagement.column2.links')" :key="item.link"
                    @click.native="jumpPageToCustomerInsightChild(item.link)">
              <div class="perssion-link">{{item.link}}</div>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
      <el-col :span="8" class="column3">
        <el-card style="min-height:555px;">
          <div class="title">{{$t('Searchlight.CustomerManagement.column3.title')}}</div>
          <div class="question">{{$t('CustomerManagement.column3.question')}}</div>
          <div class="cont">{{$t('CustomerManagement.column3.cont')}}</div>
          <div class="question">{{$t('CustomerManagement.question')}}</div>
          <div class="perssion-link"
               @click="jumpPageToCustomerInsightChild(item.link)"
               v-for="item in $t('Searchlight.CustomerManagement.column3.links')" :key="item.link">{{item.link}}</div>
        </el-card>
      </el-col>
    </el-row>
  </div>

</template>

<script>
  import {mapGetters} from "vuex";
  export default {
    name: "CustomerManagement",
    data(){
      return {
        perssionDialog: false,
        constructionDialog: false,
        tabImg: '',
        imgEN:'../../../static/img/Customer-management-ZN.png',
        imgCH:'../../../static/img/Customer-management-CN.png'
      }
    },
    computed: {
      ...mapGetters(['language'])
    },
    watch: {
      language() {
        this.tabImage()
      }
    },
    methods:{
      tabImage(){
        if(this.language === 'en'){
          this.tabImg = this.imgEN
        }else if (this.language === 'zh') {
          this.tabImg = this.imgCH
        }
      },
      showConstructionDialog() {
        this.constructionDialog = true
      },
      jumpPageToCustomerInsightChild(item){
        let userMenus = JSON.parse(sessionStorage.getItem('userMenus'))
        let activeMenus = item.replace(/\s/ig,'')
        if(activeMenus === '客户忠诚度'){
          activeMenus = 'CustomerLoyalty'
        }
        if(activeMenus === '客户贡献'){
          activeMenus = 'CustomerContribution'
        }
        if(activeMenus === 'Top客户'){
          activeMenus = 'TopCustomer'
        }
        if(activeMenus === '客户排名'){
          activeMenus = 'CustomerRanking'
        }
        if(activeMenus === '客户调研'){
          activeMenus = 'CustomerSurvey'
        }
        if(activeMenus === '客户流失预警'){
          activeMenus = 'CustomerLossWarning'
        }
        if(userMenus.indexOf(activeMenus) > 0 || userMenus[0].toLowerCase() === 'all'){
          this.$router.push({path: `/CustomerInsight/${activeMenus}`})
        }else{
          // this.perssionDialog = true
          this.constructionDialog = true
        }
      },
    },
    mounted() {
      this.tabImage()
    }
  }
</script>

<style lang="scss" scoped>
  .CustomerManagement{
    padding: 20px 46px;
    .title{
      font-family: OpenSansShin;
      font-weight:bold;
      font-size:20px;
      color:#333;
    }
    .question{
      font-family: OpenSansShin;
      font-weight:bold;
      font-size:14px;
      color:#666;
      margin-top:20px;
      height:38px;
    }
    .cont{
      margin-top:20px;
      height:220px;
      font-size:14px;
      color:#7c8694;
      line-height:24px;
    }
    @media screen and (max-width: 1366px) {
      .cont{
        height:250px;
      }
    }
    .cont + .question{
      font-family: OpenSansShin;
      height:19px;
      color: #4dcfa3;
    }
    .top-box{
      .img-info{
        text-align:center;
        img{
          width:96%;
        }
      }
    }
    .bottom-box{
      margin-top:20px;
      .title{
        color:#ff5b00;
      }
      .perssion-link{
        margin-top:24px;
        color:#7c8694;
        font-size: 12px;
        cursor: pointer;
        text-decoration: underline;
      }
      .question +.perssion-link{
        margin-top:20px;
      }
      .column1{
        width:31%;
      }
      .column2{
        width:38%;
        .middleLink{
          .el-col-12:first-child,.el-col-12:nth-child(2){
            div.perssion-link{
              margin-top:20px;
            }
          }
        }
      }
      .column3{
        width:31%;
      }

    }
    .perssionDialog{
      .perssionDialogInfo{
        .title{
          font-size:20px;
          font-weight:bold;
        }
        .dialogImg{
          position:relative;
          height:200px;
          background-size:cover;
        }
        .perssionCont{
          color:#333;
          position:absolute;
          right:25px;
          top:50%;
          transform: translateY(-50%);
          .title{
            color:#333;
          }
          .cont{
            margin-right:4px;
            font-size:12px;
            color:#333;
          }
          .perssion-link{
            font-size:12px;
            color:#0090e9;
            display:inline-block;
            border-bottom:2px solid #0090e9;
          }
        }
      }
    }
  }

</style>
